<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>轮播</title>
    <style>
        #box1
        {
            height: 375px;
            width: 600px;
            overflow: hidden;
            position: relative;
            overflow: hidden;
            margin: auto;
        }
        .indexShowleft{
            position: absolute;
            top: 45%;
            left: -5%;
            width: 28px;
            height: 28px;
            background: url("sl.png")  no-repeat;
            display: block;

        }
        .indexShowright{
            position: absolute;
            top: 45%;
            right: -5%;
            width: 28px;
            height: 28px;
            background: url("sr.png")  no-repeat;
            display: block;

        }
        #box1 ul
        {
            list-style: none;
            position: absolute;
            top: 320px;
            left: 420px;
        }
        #box1 li
        {
            margin-left:2px;
            opacity: .3;
            filter: alpha(opacity=30);
            text-align: center;
            line-height: 30px;
            font-size: 20px;
            height: 30px;
            width: 30px;
            background-color: #fff;
            float: left;
            border-radius:3px;
            cursor:pointer;
        }
        #box2
        {
            position: absolute;
            top: 0px;
            left: 0px;
        }
        #box2 img
        {
            float: left;
            border: none;
        }

    </style>
</head>
<body>
<div id="box1">
        <a href="" class="indexShowleft"></a>
        <a href="" class="indexShowright"></a>
    <div id="box2">
        <a  href="#"><img src="images/1.jpg" /></a>
        <a  href="#"><img id="img2" /></a>
        <a  href="#"><img id="img3" /></a>
        <a  href="#"><img id="img4" /></a>
    </div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

<script>
    window.onload = function () {
        flag = 0;
        obj1 = document.getElementById("box2");
        obj2 = document.getElementsByTagName("li");

        time = setInterval("turn();", 3000);
        obj1.onmouseover = function () {
            clearInterval(time);
        };
        obj1.onmouseout = function () {
            time = setInterval("turn();", 4000);
        };

        for (var num = 0; num < obj2.length; num++) {
            obj2[num].onmouseover = function () {
                turn(this.innerHTML);
                clearInterval(time);
            };
            obj2[num].onmouseout = function () {
                time = setInterval("turn();", 5000);
            }
        }
        document.getElementById("img2").src = "images/2.jpg";
        document.getElementById("img3").src = "images/3.jpg";
        document.getElementById("img4").src = "images/4.jpg";
    }
    function turn(value) {
        if (value != null) {
            flag = value - 2;
        }
        if (flag < obj2.length - 1)
            flag++;
        else
            flag = 0;
        obj1.style.top = flag * (-375) + "px";
        for (var j = 0; j < obj2.length; j++) {
            obj2[j].style.backgroundColor = "#ffffff";
        }
        obj2[flag].style.backgroundColor = "#666666";
    }
</script>
</body>
</html>